import React from 'react';
import { ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';
export function CategoryNavigation() {
  const categories = [{
    title: 'Skincare',
    description: 'Nourish your skin with gentle, effective formulas',
    image: 'https://images.unsplash.com/photo-1576426863848-c21f53c60b19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    path: '/skincare'
  }, {
    title: 'Makeup',
    description: 'Enhance your natural beauty with clean cosmetics',
    image: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    path: '/makeup'
  }, {
    title: 'Wellness',
    description: 'Elevate your daily rituals for mind and body',
    image: 'https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
    path: '/wellness'
  }];
  return <section className="py-16 px-4 md:px-8 lg:px-12">
      <div className="max-w-7xl mx-auto">
        <h2 className="font-serif text-2xl md:text-3xl text-center mb-12 text-[#4a4a4a]">
          Explore Our Collections
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {categories.map((category, index) => <Link key={index} to={category.path} className="group relative overflow-hidden rounded-lg cursor-pointer">
              <div className="h-96 bg-cover bg-center transition-transform duration-500 group-hover:scale-105" style={{
            backgroundImage: `url(${category.image})`
          }}></div>
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6">
                <h3 className="font-serif text-2xl text-white mb-2">
                  {category.title}
                </h3>
                <p className="text-white/90 text-sm mb-4">
                  {category.description}
                </p>
                <div className="flex items-center text-white text-sm font-medium">
                  <span>Explore</span>
                  <ArrowRight size={16} className="ml-2 transition-transform duration-300 group-hover:translate-x-1" />
                </div>
              </div>
            </Link>)}
        </div>
      </div>
    </section>;
}